<template>
  <div class="exhibitor-application">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="container">
        <h1 class="page-title">展商申请</h1>
        <p class="page-subtitle">申请参加FAIR plus 2025机器人全产业链接会</p>
      </div>
    </div>

    <div class="container">
      <!-- 申请流程 -->
      <section class="process-section">
        <h2 class="section-title">申请流程</h2>
        <div class="process-content">
          <div class="process-step" v-for="(step, index) in processSteps" :key="step.id">
            <div class="step-number">{{ index + 1 }}</div>
            <div class="step-content">
              <h3>{{ step.title }}</h3>
              <p>{{ step.description }}</p>
              <div class="step-duration">{{ step.duration }}</div>
            </div>
          </div>
        </div>
      </section>

      <!-- 申请表单 -->
      <section class="form-section">
        <h2 class="section-title">在线申请</h2>
        <div class="form-content">
          <el-form 
            ref="applicationForm" 
            :model="formData" 
            :rules="formRules" 
            label-width="120px"
            class="application-form"
          >
            <!-- 基本信息 -->
            <div class="form-section-title">
              <h3>基本信息</h3>
            </div>
            
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="公司名称" prop="companyName">
                  <el-input v-model="formData.companyName" placeholder="请输入公司名称" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系人" prop="contactPerson">
                  <el-input v-model="formData.contactPerson" placeholder="请输入联系人姓名" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="联系电话" prop="phone">
                  <el-input v-model="formData.phone" placeholder="请输入联系电话" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="邮箱地址" prop="email">
                  <el-input v-model="formData.email" placeholder="请输入邮箱地址" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="公司地址" prop="address">
              <el-input v-model="formData.address" placeholder="请输入公司详细地址" />
            </el-form-item>

            <!-- 展品信息 -->
            <div class="form-section-title">
              <h3>展品信息</h3>
            </div>

            <el-form-item label="展品类别" prop="productCategory">
              <el-select v-model="formData.productCategory" placeholder="请选择展品类别" style="width: 100%">
                <el-option
                  v-for="category in productCategories"
                  :key="category.value"
                  :label="category.label"
                  :value="category.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="展品描述" prop="productDescription">
              <el-input
                v-model="formData.productDescription"
                type="textarea"
                :rows="4"
                placeholder="请详细描述您的展品信息"
              />
            </el-form-item>

            <!-- 展位需求 -->
            <div class="form-section-title">
              <h3>展位需求</h3>
            </div>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="展位类型" prop="boothType">
                  <el-select v-model="formData.boothType" placeholder="请选择展位类型" style="width: 100%">
                    <el-option
                      v-for="type in boothTypes"
                      :key="type.value"
                      :label="type.label"
                      :value="type.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="展位面积" prop="boothSize">
                  <el-select v-model="formData.boothSize" placeholder="请选择展位面积" style="width: 100%">
                    <el-option
                      v-for="size in boothSizes"
                      :key="size.value"
                      :label="size.label"
                      :value="size.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="特殊需求" prop="specialRequirements">
              <el-input
                v-model="formData.specialRequirements"
                type="textarea"
                :rows="3"
                placeholder="如有特殊需求请在此说明"
              />
            </el-form-item>

            <!-- 提交按钮 -->
            <el-form-item>
              <el-button type="primary" @click="submitApplication" :loading="submitting">
                提交申请
              </el-button>
              <el-button @click="resetForm">重置表单</el-button>
            </el-form-item>
          </el-form>
        </div>
      </section>

      <!-- 展位价格 -->
      <section class="pricing-section">
        <h2 class="section-title">展位价格</h2>
        <div class="pricing-content">
          <div class="pricing-card" v-for="pricing in pricingPlans" :key="pricing.id">
            <div class="pricing-header">
              <h3>{{ pricing.name }}</h3>
              <div class="pricing-price">
                <span class="currency">¥</span>
                <span class="amount">{{ pricing.price }}</span>
                <span class="unit">/㎡</span>
              </div>
            </div>
            <div class="pricing-features">
              <ul>
                <li v-for="feature in pricing.features" :key="feature">{{ feature }}</li>
              </ul>
            </div>
            <div class="pricing-note">
              <p>{{ pricing.note }}</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 联系方式 -->
      <section class="contact-section">
        <h2 class="section-title">联系我们</h2>
        <div class="contact-content">
          <div class="contact-item" v-for="contact in contactInfo" :key="contact.id">
            <div class="contact-icon">
              <el-icon><component :is="contact.icon" /></el-icon>
            </div>
            <div class="contact-info">
              <h3>{{ contact.title }}</h3>
              <p>{{ contact.content }}</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  Phone, 
  Message, 
  Location, 
  Clock,
  Document,
  Check
} from '@element-plus/icons-vue'
import { subpageApi } from '@/api/user'

export default {
  name: 'ExhibitorApplication',
  components: {
    Phone,
    Message,
    Location,
    Clock,
    Document,
    Check
  },
  setup() {
    const applicationForm = ref(null)
    const submitting = ref(false)

    const formData = reactive({
      companyName: '',
      contactPerson: '',
      phone: '',
      email: '',
      address: '',
      productCategory: '',
      productDescription: '',
      boothType: '',
      boothSize: '',
      specialRequirements: ''
    })

    const formRules = {
      companyName: [
        { required: true, message: '请输入公司名称', trigger: 'blur' }
      ],
      contactPerson: [
        { required: true, message: '请输入联系人姓名', trigger: 'blur' }
      ],
      phone: [
        { required: true, message: '请输入联系电话', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
      ],
      email: [
        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
      ],
      address: [
        { required: true, message: '请输入公司地址', trigger: 'blur' }
      ],
      productCategory: [
        { required: true, message: '请选择展品类别', trigger: 'change' }
      ],
      productDescription: [
        { required: true, message: '请输入展品描述', trigger: 'blur' }
      ],
      boothType: [
        { required: true, message: '请选择展位类型', trigger: 'change' }
      ],
      boothSize: [
        { required: true, message: '请选择展位面积', trigger: 'change' }
      ]
    }

    const processSteps = ref([])
    const productCategories = ref([])
    const boothTypes = ref([])
    const boothSizes = ref([])
    const pricingPlans = ref([])
    const contactInfo = ref([])

    // 加载申请流程数据
    const loadProcessSteps = async () => {
      try {
        const response = await subpageApi.getSubpageByKey('exhibitors', 'application-process')
        if (response && response.code === '200' && response.data) {
          const data = response.data
          if (data.content) {
            try {
              const contentData = JSON.parse(data.content)
              processSteps.value = contentData.steps || []
            } catch (e) {
              console.error('解析申请流程数据失败:', e)
              processSteps.value = []
            }
          } else {
            processSteps.value = []
          }
        } else {
          processSteps.value = []
        }
      } catch (error) {
        console.error('加载申请流程数据失败:', error)
        processSteps.value = []
      }
    }

    // 加载展品类别数据
    const loadProductCategories = async () => {
      try {
        const response = await subpageApi.getSubpageByKey('exhibitors', 'product-categories')
        if (response && response.code === '200' && response.data) {
          const data = response.data
          if (data.content) {
            try {
              const contentData = JSON.parse(data.content)
              productCategories.value = contentData.categories || []
            } catch (e) {
              console.error('解析展品类别数据失败:', e)
              productCategories.value = []
            }
          } else {
            productCategories.value = []
          }
        } else {
          productCategories.value = []
        }
      } catch (error) {
        console.error('加载展品类别数据失败:', error)
        productCategories.value = []
      }
    }

    // 加载展位类型数据
    const loadBoothTypes = async () => {
      try {
        const response = await subpageApi.getSubpageByKey('exhibitors', 'booth-types')
        if (response && response.code === '200' && response.data) {
          const data = response.data
          if (data.content) {
            try {
              const contentData = JSON.parse(data.content)
              boothTypes.value = contentData.types || []
            } catch (e) {
              console.error('解析展位类型数据失败:', e)
              boothTypes.value = []
            }
          } else {
            boothTypes.value = []
          }
        } else {
          boothTypes.value = []
        }
      } catch (error) {
        console.error('加载展位类型数据失败:', error)
        boothTypes.value = []
      }
    }

    // 加载展位面积数据
    const loadBoothSizes = async () => {
      try {
        const response = await subpageApi.getSubpageByKey('exhibitors', 'booth-sizes')
        if (response && response.code === '200' && response.data) {
          const data = response.data
          if (data.content) {
            try {
              const contentData = JSON.parse(data.content)
              boothSizes.value = contentData.sizes || []
            } catch (e) {
              console.error('解析展位面积数据失败:', e)
              boothSizes.value = []
            }
          } else {
            boothSizes.value = []
          }
        } else {
          boothSizes.value = []
        }
      } catch (error) {
        console.error('加载展位面积数据失败:', error)
        boothSizes.value = []
      }
    }

    // 加载价格方案数据
    const loadPricingPlans = async () => {
      try {
        const response = await subpageApi.getSubpageByKey('exhibitors', 'pricing-plans')
        if (response && response.code === '200' && response.data) {
          const data = response.data
          if (data.content) {
            try {
              const contentData = JSON.parse(data.content)
              pricingPlans.value = contentData.plans || []
            } catch (e) {
              console.error('解析价格方案数据失败:', e)
              pricingPlans.value = []
            }
          } else {
            pricingPlans.value = []
          }
        } else {
          pricingPlans.value = []
        }
      } catch (error) {
        console.error('加载价格方案数据失败:', error)
        pricingPlans.value = []
      }
    }

    // 加载联系信息数据
    const loadContactInfo = async () => {
      try {
        const response = await subpageApi.getSubpageByKey('exhibitors', 'contact-info')
        if (response && response.code === '200' && response.data) {
          const data = response.data
          if (data.content) {
            try {
              const contentData = JSON.parse(data.content)
              contactInfo.value = contentData.contacts || []
            } catch (e) {
              console.error('解析联系信息数据失败:', e)
              contactInfo.value = []
            }
          } else {
            contactInfo.value = []
          }
        } else {
          contactInfo.value = []
        }
      } catch (error) {
        console.error('加载联系信息数据失败:', error)
        contactInfo.value = []
      }
    }

    const submitApplication = async () => {
      if (!applicationForm.value) return
      
      try {
        await applicationForm.value.validate()
        submitting.value = true
        
        // TODO: 实现实际的提交逻辑
        setTimeout(() => {
          ElMessage.success('申请提交成功！我们将在3-5个工作日内与您联系。')
          submitting.value = false
          resetForm()
        }, 2000)
      } catch (error) {
        ElMessage.error('请完善申请信息')
      }
    }

    const resetForm = () => {
      if (applicationForm.value) {
        applicationForm.value.resetFields()
      }
    }

    onMounted(() => {
      loadProcessSteps()
      loadProductCategories()
      loadBoothTypes()
      loadBoothSizes()
      loadPricingPlans()
      loadContactInfo()
    })

    return {
      applicationForm,
      formData,
      formRules,
      submitting,
      processSteps,
      productCategories,
      boothTypes,
      boothSizes,
      pricingPlans,
      contactInfo,
      submitApplication,
      resetForm
    }
  }
}
</script>

<style scoped>
.exhibitor-application {
  min-height: 100vh;
  background: linear-gradient(135deg, #320063 0%, #4a0a8a 100%);
}

.page-header {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 120px 0 80px 0;
  margin-top: 0;
  text-align: center;
  color: white;
}

.page-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.page-subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 内容区域样式 */
.process-section,
.form-section,
.pricing-section,
.contact-section {
  margin: 80px 0;
  padding: 60px 0;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.section-title {
  font-size: 2.5rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 50px;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* 申请流程样式 */
.process-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.process-step {
  position: relative;
  padding: 30px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  transition: transform 0.3s ease;
}

.process-step:hover {
  transform: translateY(-5px);
}

.step-number {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: #320063;
  margin: 0 auto 20px;
}

.step-content h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 15px;
  color: #ffd700;
}

.step-content p {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 15px;
}

.step-duration {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 0.9rem;
  display: inline-block;
}

/* 表单样式 */
.form-content {
  max-width: 800px;
  margin: 0 auto;
}

.application-form {
  background: rgba(255, 255, 255, 0.08);
  padding: 40px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.form-section-title {
  margin: 30px 0 20px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.form-section-title h3 {
  font-size: 1.4rem;
  font-weight: 600;
  color: #ffd700;
  margin: 0;
}

:deep(.el-form-item__label) {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 500;
}

:deep(.el-input__inner),
:deep(.el-textarea__inner) {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: white !important;
}

:deep(.el-input__inner::placeholder),
:deep(.el-textarea__inner::placeholder) {
  color: rgba(255, 255, 255, 0.5) !important;
}

:deep(.el-select .el-input__inner) {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: white !important;
}

:deep(.el-button--primary) {
  background: linear-gradient(135deg, #ffd700, #ffed4e) !important;
  border: none !important;
  color: #320063 !important;
  font-weight: 600;
  padding: 12px 30px;
}

:deep(.el-button--primary:hover) {
  background: linear-gradient(135deg, #ffed4e, #ffd700) !important;
  transform: translateY(-2px);
}

:deep(.el-button) {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: white !important;
}

:deep(.el-button:hover) {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* 展位价格样式 */
.pricing-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.pricing-card {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 30px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.pricing-header h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffd700;
  margin-bottom: 20px;
}

.pricing-price {
  margin-bottom: 25px;
}

.pricing-price .currency {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.8);
}

.pricing-price .amount {
  font-size: 2.5rem;
  font-weight: 700;
  color: #ffd700;
  margin: 0 5px;
}

.pricing-price .unit {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
}

.pricing-features ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.pricing-features li {
  padding: 8px 0;
  color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pricing-features li:last-child {
  border-bottom: none;
}

.pricing-note p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
}

/* 联系方式样式 */
.contact-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 25px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease;
}

.contact-item:hover {
  transform: translateX(10px);
}

.contact-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #320063;
  margin-right: 20px;
  flex-shrink: 0;
}

.contact-info h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: #ffd700;
}

.contact-info p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }
  
  .page-subtitle {
    font-size: 1rem;
  }

  .section-title {
    font-size: 2rem;
  }

  .process-content,
  .pricing-content,
  .contact-content {
    grid-template-columns: 1fr;
  }

  .application-form {
    padding: 20px;
  }

  .process-step,
  .pricing-card,
  .contact-item {
    padding: 20px;
  }

  .step-number {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }

  .contact-icon {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
    margin-right: 15px;
  }

  .pricing-price .amount {
    font-size: 2rem;
  }
}
</style> 